const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   // module属性用于配置模块相关的处理规则
   module: {
    // rules是一个数组，包含了一系列的规则对象
    // 每个规则对象定义了如何处理特定类型的文件
    rules: [
      {
        // 这是一个正则表达式，用于匹配文件的扩展名
        // 在这个例子中，/\.css$/i表示匹配以.css结尾的文件，不区分大小写所有以，都将被提供给 style-loader 和 css-loader
        test: /\.css$/i,
        //请确保 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。
        //如果不遵守此约定，webpack 可能会抛出错误。
        // css-loader用于解析 CSS 文件中的@import和url()语句，并将 CSS 文件作为模块进行处理。
        // style-loader用于将处理后的 CSS 代码插入到 HTML 页面中。
        use: ['style-loader', 'css-loader'],
        //将 CSS 文件作为单独的文件输出到输出目录
        type: 'asset/resource',
        //为 CSS 文件指定一个输出文件名
        generator: {
          filename: 'asset/css/[name][ext]'
        }
      },
      {
        // 匹配图片文件，不区分大小写
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        // 使用 webpack5 内置asset/resource 模块类型，将资源文件作为单独的文件输出到输出目录
        type: 'asset/resource',
        // 为资源文件指定一个输出文件名
        generator: {
          filename: 'asset/png/[name][ext]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'asset/font/[name][ext]'
        }
      },
    ],
  },
  
 };